<!--用户操作弹窗-->
<ng-template #modalContent>
    <nz-spin [nzSpinning]="modalLoadingState">
        <form nz-form [formGroup]="dataForm" nzLayout="vertical">
            <div nz-row [nzGutter]="24">
                <div nz-col nzSpan="24">
                    <nz-form-item>
                        <nz-form-label>上级菜单</nz-form-label>
                        <nz-form-control [nzErrorTip]="errorNameTpl">
                                    <input nz-input [(ngModel)]="entity.parentId" *ngIf='false' formControlName='parentId' />
                                    <app-tree-select [maxHeight]='"500px"' [tree]="menuTree" [(id)]="entity.parentId" ></app-tree-select>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col nzSpan="24">
                    <nz-form-item>
                        <nz-form-label>菜单类型</nz-form-label>
                        <nz-form-control>
                            <nz-radio-group [(ngModel)]="entity.menuType" formControlName='menuType'>
                                <label nz-radio nzValue="M">目录</label>
                                <label nz-radio nzValue="C">菜单</label>
                                <label nz-radio nzValue="A">按钮</label>
                            </nz-radio-group>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col nzSpan="24">
                    <nz-form-item>
                        <nz-form-label>菜单图标</nz-form-label>
                        <nz-form-control [nzErrorTip]="errorNameTpl">
                            <div nz-row>
                                <nz-col nzFlex='1 0 40'>
                                    <button nz-popover
                                            nz-button
                                            nzType="link"
                                            [(nzPopoverVisible)]="menuTableVisible"
                                            (nzPopoverVisibleChange)="menuTableVisibleChange($event)"
                                            nzPopoverTrigger="click"
                                            nzPopoverPlacement="bottomLeft"
                                            [nzPopoverContent]="contentTemplate"><app-svg-show [code] = 'iconData.get(entity.icon)' [width]='30' [height]='30'></app-svg-show>
                                    </button>
                                </nz-col>
                                <nz-col nzFlex='0 0 30'>
                                    <input nz-input type="text" style='margin: 0px;padding: 0px;line-height: 40px' nzBorderless [ngModel]='entity.icon' readonly formControlName='icon'/>
                                </nz-col>
                            </div>


                        </nz-form-control>
                    </nz-form-item>
                </div>

                <ng-template #contentTemplate>
                    <div style='width: 800px; height: 200px; margin-bottom: 30px'>
                        <a (click)="closeMenuTable()">关闭</a>
                            <perfect-scrollbar>
                                <app-icon-select-table [iconKey]='entity.icon' (iconKeyChange)='iconSelect($event)'></app-icon-select-table>
                            </perfect-scrollbar>
                    </div>
                </ng-template>

                <div nz-col nzSpan="12">
                    <nz-form-item>
                        <nz-form-label nzRequired>菜单名称</nz-form-label>
                        <nz-form-control [nzErrorTip]="errorNameTpl">
                            <input nz-input [(ngModel)]="entity.menuName" formControlName='menuName' placeholder="请输入菜单名称" />
                            <ng-template #errorNameTpl let-control>
                                <ng-container *ngIf="control.hasError('required')">不能为空</ng-container>
                            </ng-template>
                        </nz-form-control>
                    </nz-form-item>
                </div>

                <div nz-col nzSpan="12">
                    <nz-form-item>
                        <nz-form-label nzRequired>显示排序</nz-form-label>
                        <nz-form-control [nzErrorTip]="errorNameTpl">
                            <input nz-input type='number' [(ngModel)]="entity.orderNum" formControlName='orderNum' placeholder="请输入排序" />
                            <ng-template #errorNameTpl let-control>
                                <ng-container *ngIf="control.hasError('required')">不能为空</ng-container>
                            </ng-template>
                        </nz-form-control>
                    </nz-form-item>
                </div>


                <div nz-col nzSpan="12">
                    <nz-form-item>
                        <nz-form-label>是否外链</nz-form-label>
                        <nz-form-control>
                            <nz-radio-group [(ngModel)]="entity.isFrame" nzButtonStyle="solid" formControlName='isFrame'>
                                <label nz-radio-button nzValue="0">是</label>
                                <label nz-radio-button nzValue="1">否</label>
                            </nz-radio-group>
                        </nz-form-control>
                    </nz-form-item>
                </div>

                <div nz-col nzSpan="12">
                    <nz-form-item>
                        <nz-form-label nzRequired>路由地址</nz-form-label>
                        <nz-form-control>
                            <input nz-input [(ngModel)]="entity.path" formControlName='path' placeholder="请输入地址" />
                            <ng-template #errorNameTpl let-control>
                                <ng-container *ngIf="control.hasError('required')">不能为空</ng-container>
                            </ng-template>
                        </nz-form-control>
                    </nz-form-item>
                </div>

                <div nz-col nzSpan="12">
                    <nz-form-item>
                        <nz-form-label>显示状态</nz-form-label>
                        <nz-form-control>
                            <nz-radio-group [(ngModel)]="entity.visible" nzButtonStyle="solid" formControlName='visible'>
                                <label nz-radio-button nzValue="0">显示</label>
                                <label nz-radio-button nzValue="1">隐藏</label>
                            </nz-radio-group>
                        </nz-form-control>
                    </nz-form-item>
                </div>

                <div nz-col nzSpan="12">
                    <nz-form-item>
                        <nz-form-label>菜单状态</nz-form-label>
                        <nz-form-control>
                            <nz-radio-group [(ngModel)]="entity.status" nzButtonStyle="solid" formControlName='status'>
                                <label nz-radio-button nzValue="0">正常</label>
                                <label nz-radio-button nzValue="1">停用</label>
                            </nz-radio-group>
                        </nz-form-control>
                    </nz-form-item>
                </div>
            </div>
        </form>
    </nz-spin>
</ng-template>
<ng-template #modalFooter>
    <button nz-button nzType="primary" [disabled]="dataForm.invalid" [nzLoading]="saveLoadingState" (click)="onSave()">
        保存
    </button>
</ng-template>

